<template>
    <div class="user-info-container">

      <el-card style="width: 800px; margin-left: 10px; margin-top: 10px;height: 400px;" shadow="hover">
      <el-form label-width="80px" size="small">
 
        <el-upload>
          <img v-if="true" :src="require('/src/Pic/QQ图片20230309112658.jpg')" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
 
        <el-form-item label="工号" style="margin-left: 200px; margin-top: -150px">
          <el-input v-model="userInfo.num" disabled autocomplete="off" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="用户名" style="margin-left: 200px">
          <el-input v-model="userInfo.name" disabled autocomplete="off" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="电话" style="margin-left: 200px">
          <el-input v-model="userInfo.phone" disabled autocomplete="off" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="学院" style="margin-left: 200px" >
          <el-input v-model="userInfo.academician.name" disabled autocomplete="off" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="changePersonInfo">修改个人信息</el-button>
          <el-button type="primary" @click="changePassword"><i class="el-icon-location" />修改密码</el-button>
        </el-form-item>
      </el-form>
    </el-card>


    <!-- 修改信息和密码的对话框 -->
    <el-dialog title="修改信息" v-model="editInfoDialogVisible">
        <el-form-item label="请输入你的姓名" style="margin-left: 20px">
            <el-input v-model="userInfo.name" :placeholder="userInfo.name"></el-input>
        </el-form-item>
        
        <el-form-item label="请输入你的电话" style="margin-left: 20px">
            <el-input v-model="userInfo.phone" placeholder="用户名"></el-input>
        </el-form-item>
        <template v-slot:footer>
          <el-button @click="editInfoDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitEditInfo">确 定</el-button>
        </template>
      </el-dialog>

      <el-dialog title="修改密码" v-model="changePasswordDialogVisible">

        <el-form-item label="请输入你的旧密码" style="margin-left: 20px">
            <el-input type="password" v-model="oldPassword" placeholder="旧密码"></el-input>
        </el-form-item>

        <el-form-item label="请输入你的新密码" style="margin-left: 20px">
            <el-input type="password" v-model="userInfo.password" placeholder="新密码"></el-input>
        </el-form-item>
        <template v-slot:footer>
          <el-button @click="changePasswordDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitChangePassword">确 定</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import service from '@/request';
  import '../assets/css/table.css';
  import { ElMessage } from 'element-plus';
  import { reactive, onBeforeMount ,ref} from 'vue';
  
  let oldPassword=ref('');
  // 用户的基本信息
  const userInfo = reactive({
  "id": 0,
  "num": "string",
  "password": "string",
  "name": "string",
  "phone": "string",
  "state": true,
  "academician": {
    "id": 0,
    "name": "string",
    "state": true
  },
  "acadminianId": 0
});

  let editInfoDialogVisible=ref(false);
  let changePasswordDialogVisible=ref(false);

// #region 显示提示
async function ShowTip(isSuccess, msg) {
    if (isSuccess == true) {
        ElMessage({ message: msg, type: 'success' })
    }
    else {
        ElMessage({ message: msg, type: 'error' })
    }
}

  //更改个人信息
  async function submitEditInfo()
  {
    await service.post(`/User/changeUserInfo`,userInfo).then(
                async res => {
                    ShowTip(true,"操作成功")
                    editInfoDialogVisible.value=false;
                },
                error => {
                    ShowTip(false,error)
                    editInfoDialogVisible.value=false;
                }
            )
  }
  //修改个人信息
  async function changePersonInfo()
  {
    // 获取内存中的用户id
    const userId = localStorage.getItem('userId');
    userInfo.id=userId;
    editInfoDialogVisible.value=true;
  }

  //修改密码
  async function changePassword()
  {
    // 获取内存中的用户id
    const userId = localStorage.getItem('userId');
    userInfo.id=userId;
    changePasswordDialogVisible.value=true;
    console.log('更改密码');
  }

  async function submitChangePassword()
  {
    await service.post(`/User/changeUserPassword`,userInfo).then(
                async res => {
                    ShowTip(true,"操作成功")
                    changePasswordDialogVisible.value=false;
                },
                error => {
                    ShowTip(false,error)
                    changePasswordDialogVisible.value=false;
                }
            )
  }

  onBeforeMount(async () => {
    // 获取内存中的用户id
    const userId = localStorage.getItem('userId');
    // 获取到用户信息
    await service.get(`User/getUserInfo?uid=${userId}`).then((res) => {
      userInfo.name = res.name;
      userInfo.num = res.num;
      userInfo.phone = res.phone;
      userInfo.academician.name = res.academician.name;
    });
  });
  </script>
  
  <style scoped>
  .user-info-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70vh;
  }
  
  .user-info-card {
    background-color: #f5f7fa;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .user-details {
    padding: 20px;
  }
  .avatar-uploader {
  text-align: left;
  padding-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 160px;
  height: 160px;
  display: block;
}
  </style>
  